<template>
	<view class="content">
		<view class="card" :style="bgColor[card.ex]">
			<view class="hcard">
				<text>{{card.title}}</text>
				<text>{{card.type}}</text>
			</view>
			
			<view class="mcard">
				<view>
					<text>支持场馆:</text><text>{{card.place}}</text>
				</view>
				<view>
					<text>使用期限:</text><text>{{card.date}}</text>
				</view>
				<view >
					<text>使用次数:</text><text>{{card.times}}</text>
				</view>
			</view>
			<view class="fcard">
				<text>售价:</text><text>￥{{card.price}}</text><text>￥{{card.oprice}}</text>
			</view>
		</view>
	</view>
	<view class="plist">
		<view class="title">选择规格</view>
		<view class="list" v-for="v in list" :key="v.id">
			<view class="item">
				<view class="a">
					<view>
						<text>{{v.price}}元({{v.times}})</text>
					</view>
					<view >
						<text>原价</text><text>￥{{v.oprice}}</text>
					</view>
					<view >
						<text>使用期限</text><text>{{v.date}}</text>
	
					</view>
				</view>
				<view class="b" @click="radioChange">
					<text :style="v.value?'background-color:blue':'background-color:white'" :data-v="v.id"></text>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					选择销售人员:
			    </view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
				</view>
			</view>
		</view>
	    
	</view>
	<view class="ex"></view>
	<view class="bottom" >
	 <view class="lbottom"><uni-icons type="phone"></uni-icons><text>联系客服</text></view>
	 <view  class="lbottom"><text class="bprice">￥{{card.price}}</text><text>应付价格</text></view>
	 <view class="buy" @click="goto">立即购买</view>
	</view>
	
</template>

<script>
	import { reactive, toRefs,onMounted } from 'vue';
	import store from '../../store/index.js';
	import myRequest from '../../utils/myRequest.js';
	import {onLoad,onShow} from '@dcloudio/uni-app'
	export default {
		setup(){
			let data=reactive({
				All:[{id:1110,title:'健身5次体验',type:'次卡类型',ex:0,place:'全部场馆',price:66,times:'5次',oprice:88,date:'不限天数',value:0},
					{id:1111,title:'健身2次体验',type:'次卡类型',ex:0,place:'全部场馆',price:23,times:"2次",oprice:88,date:'不限天数',value:0},
					{id:1112,title:'健身7次体验',type:'次卡类型',ex:0,place:'全部场馆',price:45,times:"7次",oprice:88,date:'不限天数',value:0},
					{id:1113,title:'健身5天体验',type:'期限类型',ex:1,place:'全部场馆',price:33,times:'不限次数',oprice:88,date:'5天',value:0},
					{id:1114,title:'健身15天体验',type:'期限类型',ex:1,place:'全部场馆',price:23,times:'不限次数',oprice:88,date:'15天',value:0},
					{id:1115,title:'健身8天体验',type:'期限类型',ex:1,place:'全部场馆',price:35,times:'不限次数',oprice:88,date:'8天',value:0},
					{id:1116,title:'健身88元体验',type:'储值类型',ex:2,place:'全部场馆',price:68,times:'不限次数',oprice:88,date:'不限天数',value:0},
					{id:1117,title:'健身188元体验',type:'储值类型',ex:2,place:'全部场馆',price:133,times:'不限次数',oprice:288,date:'不限天数',value:0},
					{id:1118,title:'健身288元体验',type:'储值类型',ex:2,place:'全部场馆',price:199,times:'不限次数',oprice:388,date:'不限天数',value:0}],
				card:{},
				list:[],
				array: ['张三', '李四', '王五', '正六'],
				bgColor:['background:linear-gradient(to right,#6A31FD,#00CFFF)',
				        'background:linear-gradient(to right,#E21D1F,#D79797)',
						'background:linear-gradient(to right,#00CFCF,#949494)',],
				item:0,
				index:0,
				bindPickerChange: function(e) {
				            this.index = e.detail.value
				 },
				radioChange(ev) {
					for(let i=0;i<this.list.length;i++){
						if(this.list[i].id==ev.target.dataset.v){
							this.list[i].value=1;
							this.card=this.list[i];
						}else{
							this.list[i].value=0
						}
					}
				},
				goto(url) {
					myRequest({
						url:'/addcard',
						method:'post',
						data:{
							title:this.card.title,
							type:this.card.type,
							place:this.card.place,
							date:this.card.date,
							times:this.card.times,
							price:this.card.price,
							oprice:this.card.oprice,
							ex:this.card.ex,
							vipId:store.state.userdata[0].vipId
						}
					}).then(res=>{
						if(res.data.code==200){
							uni.navigateTo({
								url:'/pages/Client/payDone?price='+data.card.price
								})
						}
					})
					
				},
				ifType(type){
					this.All.forEach(v=>{
						if(v.ex==type){
							this.list.push(v)
						}
					})
				}
			});
			onMounted(()=>{
				if(store.state.cardNow.id){
					store.state.cardNow.value=1;
					data.list.unshift(store.state.cardNow);
					data.card=store.state.cardNow
					data.ifType(store.state.cardNow.ex)
				}else{
					data.card=data.list[0];
				}
				
			})
			onLoad((e)=>{
				if(e.useMyId){
					data.ifType(e.useMyId);
					data.list[0].value=1;
					
				}
				
			})
			return { ...toRefs(data) };
		}
	}
</script>

<style lang="scss">
.content{
	background-color: rgb(242,242,242);
	padding: 25rpx;
	text{
		height: 50rpx;
		line-height: 50rpx;
		color: white;
		
	}
	.card{
			font-size: 24rpx;
			padding: 15rpx;
			margin-bottom: 25rpx;
			border-radius: 15rpx;
			background: linear-gradient(to right, red,yellow);
			.hcard{
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
			}
			
			.fcard{
				text:nth-of-type(2){
					font-size: 28rpx;
				}
				text:last-child{
					margin-left: 10rpx;
					text-decoration: line-through;
				}
			}
		}
	}
.plist{
	.title{
		font-size: 28rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding: 25rpx;
		font-weight: 700;
		border-bottom: 1px solid rgb(153,153,163);
	}
	.list{
		.item{
			font-size: 24rpx;
			padding: 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid rgb(153,153,163);
			.a{
				
				display: flex;
				flex-direction:column;
				color: rgb(153,153,163);
			}
			.b{
				display: flex;
			    align-items: center;
				justify-content: center;
				width: 30rpx;
				height:30rpx;
				border: 1px solid rgb(153,153,163);	
				border-radius: 30rpx;
			    text{
				width: 30rpx;
				height:30rpx;
				border-radius: 30rpx;
				transform: scale(0.7);
			    }
			}
		}
	}
    .uni-list-cell{
		font-size: 28rpx;
		height: 100rpx;
		color: rgb(153,153,163);
		border-bottom: 1px solid rgb(153,153,163);
		display: flex;
		justify-content: space-around;
		align-items: center;
		.uni-list-cell-db{
			height: 60rpx;
			line-height: 60rpx;
			width: 200rpx;
			text-align: center;
			border:1px solid rgb(153,153,163) ;
		}
	}
}
.ex{
	width:750rpx;
	height: 100rpx;
}
.bottom{
	width:750rpx;
	height: 100rpx;
	background-color: #fff;
	color: rgb(153,153,163);
	font-size: 28rpx;
	position: fixed;
	left:0;
	bottom: 0;
	display:flex;
	.lbottom{
		width: 200rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		uni-icons{
			height: 50rpx;
			color: rgb(153,153,163)!important;
		}
		.bprice{
		color:#BD2C00;	
		font-size: 36rpx;
		}
		text{
			height: 50rpx;
			
		}
	}
	.buy{
		height: 100rpx;
		line-height: 100rpx;
		width: 350rpx;
		color:#FFF;
		text-align: center;
		background-color: rgb(0,122,246);
	}
}
</style>
